<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const linexData = ref(['2016', '2017', '2018', '2019', '2020', '2021', '2022'])
const linesData = ref([5846, 6271, 9625, 11059, 17958, 24362, 24638])
const linesData1 = ref([10672, 11701, 16426, 21069, 26224, 29462, 0])
const linesData2 = ref([1.53, 1.85, 2.1, 2.44, 2.89, 3.3, 4.01])
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '15%',
        right: '5%',
        left: '5%',
        bottom: '8%',
        containLabel: true,
    },
    legend: {
        show: true,
        top: '2%',
        textStyle: {
            color: '#FFFFFF',
        },
        icon: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        type: 'scroll'
    },
    xAxis: [
        {
            type: 'category',
            data: linexData.value,
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 128, 255, 0.36)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: '#ffffff',
                textStyle: {
                    fontSize: 12,
                }
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            data: linesData.value,
            axisLabel: {
                formatter: '{value}',
                color: '#4B779B',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
        {
            type: 'value',
            position: 'right',
            axisLabel: {
                formatter: '{value}',
                color: 'rgb(148,159,167)',
            },
            splitLine: {
                show: false,
            },
        },
        // {
        //     type: 'value',
        //     data: linesData.value,
        //     axisLabel: {
        //         align: 'right',
        //         margin: 50,
        //         fontSize: 13,
        //         formatter: function(value, index) {
        //             return value + '/次'
        //         },
        //         color: '#4F79B9',
        //     },
        //     axisLine: {
        //         show: false,
        //     },
        //     splitLine: {
        //         lineStyle: {
        //             type: 'dashed',
        //             color: 'rgba(108, 128, 151, 0.3)',
        //         },
        //     },
        // },
    ],
    series: [
        {
            type: 'bar',
            name: '申请量(项)',
            stack: 'all',
            data: linesData.value,
            barWidth: 30,
            label: {
                normal: {
                    position: 'top',
                    show: true,
                    color: '#FFFFFF',
                },
            },
            itemStyle: {
                normal: {
                    color: '#2072FF',
                },
            },
            yAxisIndex: 0,
        },
        {
            type: 'bar',
            name: '授权量(项)',
            stack: 'all',
            data: linesData1.value,
            barWidth: 30,
            label: {
                normal: {
                    position: 'top',
                    show: true,
                    color: '#FFFFFF',
                },
            },
            itemStyle: {
                normal: {
                    color: '#00C8FF',
                },
            },
            yAxisIndex: 0,
        },
        {
            type: 'line',
            name: '万人发明专利拥有量(项)',
            data: linesData2.value,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                    },
                    color: '#56DE4E',
                },
            },
            label: {
                normal: {
                    position: 'top',
                    show: false,
                    color: '#FFFFFF',
                },
            },
            yAxisIndex: 1,
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
